<template>
    <div>
        <el-card class="box-card">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>智慧书店</el-breadcrumb-item>
                <el-breadcrumb-item>书籍商城</el-breadcrumb-item>
            </el-breadcrumb>

            <el-table
                    border
                    :data="bookList">
                <!--<el-table-column
                        prop="code"
                        label="书籍的code"
                        align="center">
                </el-table-column>-->
                <el-table-column
                        prop="bookName"
                        label="书籍名称"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="bookPrice"
                        label="书籍价格"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="author"
                        label="书籍作者"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="bookDesc"
                        label="书籍简介"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="publishingHouse"
                        label="书籍出版社"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="bookInventoryLevel"
                        label="书籍库存量"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="supplyingParty"
                        label="书籍供货方"
                        align="center">
                </el-table-column>
                <el-table-column
                        width="200px"
                        label="操作"
                        align="center">
                    <!--点击按钮 需要绑定@click的时间 例如 @click="add"-->
                    <template slot-scope="scope">
                        <div v-if="scope.row.bookInventoryLevel > 0">
                            <el-button type="warning" size="mini" @click="addShop(scope.row.code)">加入购物车</el-button>
                            <el-button type="warning" size="mini" @click="buyBook(scope.row.code)">购买</el-button>
                        </div>
                        <div v-if="scope.row.bookInventoryLevel <= 0">
                            <el-button type="info" size="mini" disabled>库存量不足</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="加购数量" :visible.sync="dialogFormVisible">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="书籍数量">
                        <el-input v-model="bookNum"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm()">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="购买数量" :visible.sync="buyDiv">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="书籍数量">
                        <el-input v-model="bookNum"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="buyDiv = false">取 消</el-button>
                    <el-button type="primary" @click="buy()">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "BookDetaileList",
        data(){
            return{
                bookList:[],
                dialogFormVisible:false,
                buyDiv:false,
                userInfo:{},
                bookCode:'',
                bookNum:''
            }

        },methods:{
            findBookList:function() {
                this.$http.post('/book/findAllBookDetailed').then((res)=>{
                    console.log(res)
                    this.bookList = res.data.result.bookDetailedList;

                })
            },
            addShop(code){
                this.bookCode = code;
                this.dialogFormVisible = true
            },
            buyBook(code){
                this.bookCode = code;
                this.buyDiv = true
            },submitForm() {
                this.dialogFormVisible = false
                this.$http.post('/shoppingCart/joinShoppingCart?userInfoCode='+this.userInfo.code+'&bookDetailedCode='+this.bookCode+'&bookNum='+this.bookNum)
                    .then(res=>{
                        if(res.data.success){
                            this.$message.success("加入购物车成功")
                            this.$router.push({name:'ShoppingCartList'})
                        }else{
                            this.$message.error(res.data.message)
                            this.$router.push({name:'ShoppingCartList'})
                        }
                    })
            },buy() {
                this.$http.post('/orderRecord/createOrderRecord1?userInfoCode='+this.userInfo.code+'&code='+this.bookCode+'&num='+this.bookNum)
                    .then(res=>{
                        if(res.data.success){
                            this.$message.success("订单记录已生成")
                            this.$router.push({name:'OrderRecordList'})
                        }else{
                            this.$message.error(res.data.message)
                            this.$router.push({name:'OrderRecordList'})
                        }
                    })
                this.buyDiv = false
            }
        },mounted(){
            this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
            this.findBookList();
        }
    }
</script>

<style scoped>

</style>
